import React, { useEffect, useRef, useState } from 'react'
import {
  List,
  Avatar,
  Space,
  message,
  Badge,
  Image,
  Card,
  Row,
  Col,
  Typography,
  Button,
  Popconfirm
} from 'antd'

import classnames from 'classnames';

import {
  reqPatientList,
} from '@/services/basicConsultation';
import defImg from '@/static/images/header.png';

import styles from './index.module.less'

const BasicPatientList = ({
  onSelect,
  status,
  type,
  searchKey,
  update,
  onPush,
  user
}: {
  onSelect: Function,
  status: number | string,
  type: number | string,
  searchKey: number | string,
  update: number | string,
  onPush?: Function,
  user: any
}) => {
  const [data, setData] = useState([])
  const paginationRef = useRef({
    pageNum: 1,
    pageSize: 10,
    total: 0
  })


  async function init(query: object) {
    console.log('query :>> ', query);
    try {
      let param = {
        ...paginationRef?.current,
        type,
        key: searchKey,
        ...query
      };
      let theparam = "";
      let res:any = null;
      if(param?.status == 0){
        let {status, ...theparam} = param;
        res = await reqPatientList(theparam)  
      }else{
        res = await reqPatientList(param)
      }
      if (res?.resultCode == '00000000') {
        paginationRef.current = {
          ...paginationRef?.current,
          total: res?.data?.total
        }
        setData(res?.data?.result)

      } else {
        message.error(`获取就诊列表信息出错！${res?.message}`)
      }
    } catch (error: any) {
      message.error('获取就诊列表信息出错！', error)
    }

  }

  function onShowSizeChange(current: number, pageSize: number) {
    paginationRef.current = {
      ...paginationRef?.current,
      pageNum: current,
      pageSize,
    }
    init({});
  }


  useEffect(() => {
    paginationRef.current = {
      pageNum: 1,
      pageSize: 10,
      total: 0
    };
    init({
      status,
      type,
      key: searchKey
    })
  }, [
    searchKey,
    update,
  ])

  useEffect(() => {
    init({
      status,
      type,
      key: searchKey
    })
  }, [])

  // const confirm = (e: React.MouseEvent<HTMLElement>) => {
  //   console.log(e);
  //   // message.success('Click on Yes');
  //   onPush(item)
  // };

  const cancel = (e: React.MouseEvent<HTMLElement>) => {
    console.log(e);
    // message.error('Click on No');
  };

  return (
    
    <List
      grid={{
        gutter: 10,
        }}
      pagination={{
        position: "bottom",
        ...paginationRef.current,
        onChange: onShowSizeChange,
        // simple: true,
        size: 'default',
        showSizeChanger: false,
        showQuickJumper: false,
        hideOnSinglePage: true,
      }}
      //className={styles.listWrap}
      dataSource={data}
      renderItem={(item: any, index) => (
        <>
        <div style={{width:'285px'}}>
          <List.Item>
          {/* <List.Item.Meta
              avatar={
                <Avatar src={item?.avatar || defImg} />
              }
              title={
                [
                  <Space key='tyPatientName'>
                    <div>{item?.tyPatientName}</div>
                    <div key="phoneNum">{item?.phoneNum}</div>
                  </Space>,
                  <div key="cardId">ID:{item?.cardId}</div>,
                ]
              }
            /> */}
            <p style={{backgroundColor:'white',padding:15,margin:0,boxSizing:'border-box',borderRadius:'4px',boxShadow:'0 2px 6px 0 rgba(0, 0, 0, .1)'}}>
              <Row style={{width:260}} gutter={8}>
                <Col className={styles.cardCol}>
                 <Image src={item?.avatar || defImg} width={62} height={62} style={{boxSizing:'border-box',borderRadius:'4px',boxShadow:'0 2px 6px 0 rgba(0, 0, 0, .1)'}}></Image>
                </Col>
                <Col span={14}>
                 <Row>
                  <Col><Typography.Text>{item?.tyPatientName}</Typography.Text></Col>
                 </Row>
                 <Row>
                  <Col><Typography.Text>&nbsp;</Typography.Text></Col>
                 </Row>
                 <Row>
                  <Col><Typography.Text>{item?.phoneNum}</Typography.Text></Col>
                 </Row>
                </Col>
                <Col>
                  {/* <div style={{width:'100%',height:'5px',backgroundColor:'red'}}></div> */}
                 <div style={{textAlign:'end'}}>{item?.gender==0?'男':'女'}</div>
                </Col>
              </Row>
              <p style={{height:0.5,backgroundColor:'lightgray',margin:'5px 0'}}></p>
              <div style={{width:250}}>
                <p>
                  问诊ID:&nbsp;&nbsp;{item?.id}<br></br>
                  挂号医生:&nbsp;&nbsp;{item?.tyDoctorName}<br></br>
                  挂号诊所:&nbsp;&nbsp;太一科技<br></br>
                  挂号疾病:&nbsp;&nbsp;{item?.id}<br></br>
                  问诊时间:&nbsp;&nbsp;{item?.appointDate}&nbsp;{item?.appointTime}<br></br>
                </p>
                <p><Button type='primary' style={{borderRadius:'50px'}} onClick={()=>onSelect(item)}>开始问诊</Button></p>
              </div>
            </p>
          </List.Item>
          {/* <List.Item.Meta
              avatar={
                <Avatar src={item?.avatar || defImg} />
              }
              title={
                [
                  <Space key='tyPatientName'>
                    <div>{item?.tyPatientName}</div>
                    <div key="phoneNum">{item?.phoneNum}</div>
                  </Space>,
                  <div key="cardId">ID:{item?.cardId}</div>,
                ]
              }
            /> */}
        </div>
        {/* <Badge.Ribbon text={item?.appointDate} color="#5bc1d0" key={index}>
          <List.Item
            className={classnames(styles.listItem, { [styles.active]: user?.id == item?.id })}
            actions={[
              onPush &&
              <Popconfirm
                title="确认进行提交操作吗?"
                // description="确认进行提交操作吗?"
                onConfirm={() => onPush(item)}
                onCancel={cancel}
                okText="确认"
                cancelText="取消"
              >
                <a
                  key="list-loadmore-edit"
                  onClick={(e) => {
                    e && e.stopPropagation()
                    // onPush(item)
                  }}
                >
                  提交
                </a>
              </Popconfirm>
              ,
            ]}
            onClick={() => onSelect(item)}
          >

            <List.Item.Meta
              avatar={
                <Avatar src={item?.avatar || defImg} />
              }
              title={
                [
                  <Space key='tyPatientName'>
                    <div>{item?.tyPatientName}</div>
                    <div key="phoneNum">{item?.phoneNum}</div>
                  </Space>,
                  <div key="cardId">ID:{item?.cardId}</div>,
                ]
              }
            />

          </List.Item>
        </Badge.Ribbon> */}
        </>
      )}
    />
  )
}

export default BasicPatientList;